Web Development Notifications এবং Toast তৈরি করা গাইড ও নোট

256

Framework7 এ Notifications এবং Toast ব্যবহার করে অ্যাপ্লিকেশনে ব্যবহারকারীকে বিভিন্ন বার্তা এবং আপডেট দেখানো যায়। Notifications সাধারণত স্ক্রিনের উপরের দিকে দেখানো হয় এবং কিছু সময় পর অদৃশ্য হয়ে যায়, আর Toast সাধারণত স্ক্রিনের নিচে ছোট পপআপ আকারে প্রদর্শিত হয়।


Notifications ব্যবস্থাপনা

Notifications তৈরি করা

Framework7 এ Notification তৈরি করতে app.notification.create() মেথড ব্যবহার করা হয়। Notification এ আপনি শিরোনাম (title), বার্তা (text), আইকন (icon) ইত্যাদি সেট করতে পারেন।

var notification = app.notification.create({
  title: 'Notification Title',
  text: 'This is a notification message.',
  closeButton: true,
});

Notification চালু ও বন্ধ করা

Notification প্রদর্শন করতে notification.open() এবং বন্ধ করতে notification.close() মেথড ব্যবহার করুন।

// Notification দেখানো
notification.open();

// Notification বন্ধ করা
notification.close();

Notification এর অন্যান্য অপশন

  • title: Notification এর শিরোনাম।
  • subtitle: Notification এর সাবটাইটেল।
  • text: Notification এর মূল বার্তা।
  • icon: Notification এ আইকন যুক্ত করতে।
  • closeButton: Notification এ ক্লোজ বাটন দেখাতে true সেট করুন।
  • closeTimeout: নির্দিষ্ট সময় পর Notification স্বয়ংক্রিয়ভাবে বন্ধ করতে একটি টাইমআউট (মিলিসেকেন্ডে) নির্ধারণ করতে পারেন।
var notification = app.notification.create({
  title: 'MyApp',
  subtitle: 'New Message',
  text: 'You have a new message!',
  closeButton: true,
  closeTimeout: 3000, // 3 সেকেন্ড পর স্বয়ংক্রিয়ভাবে বন্ধ হবে
});

Toast ব্যবস্থাপনা

Toast তৈরি করা

Toast হলো স্ক্রিনের নিচে ছোট পপআপ বার্তা প্রদর্শনের জন্য ব্যবহৃত হয়। Toast সাধারণত স্বল্প সময়ের জন্য দেখানো হয়।

var toast = app.toast.create({
  text: 'This is a Toast message!',
  position: 'bottom', // টোস্ট কোথায় দেখানো হবে (bottom, center, top)
  closeTimeout: 2000, // কতক্ষণ টোস্ট প্রদর্শিত থাকবে (মিলিসেকেন্ডে)
});

Toast চালু ও বন্ধ করা

// Toast দেখানো
toast.open();

// Toast বন্ধ করা
toast.close();

Toast এর অন্যান্য অপশন

  • text: টোস্টের মূল বার্তা।
  • position: টোস্ট কোথায় প্রদর্শিত হবে (bottom, center, top)।
  • closeTimeout: স্বয়ংক্রিয়ভাবে টোস্ট বন্ধ হওয়ার সময় (মিলিসেকেন্ডে)।
  • cssClass: কাস্টম CSS ক্লাস যোগ করে টোস্টের স্টাইল কাস্টমাইজ করা যায়।
var toast = app.toast.create({
  text: 'Task Completed!',
  position: 'bottom',
  closeTimeout: 2000,
  cssClass: 'my-toast-class',
});

Notifications এবং Toast এর ব্যবহারিক উদাহরণ

Notifications উদাহরণ

var messageNotification = app.notification.create({
  title: 'MyApp',
  subtitle: 'New Message Received',
  text: 'You have a new message from John.',
  closeButton: true,
  closeTimeout: 5000,
});
messageNotification.open();

Toast উদাহরণ

var successToast = app.toast.create({
  text: 'Data saved successfully!',
  position: 'center',
  closeTimeout: 3000,
});
successToast.open();

Notifications এবং Toast ব্যবহার করে Framework7 অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন আরও প্রাণবন্ত, তথ্যবহুল এবং ইউজার-ফ্রেন্ডলি করে তোলা যায়।

Content added By
Promotion

Are you sure to start over?

Loading...